<template>
    <div id="app">
        <!--主要视图区域-->
        <div class="sk_bg">
            <img src="../assets/images/sk_bg.png" alt="">
        </div>
        <el-row :gutter="20" class="ViewCont">
            <el-col :span="4">
                <!--老师信息窗口-->
                <userbox></userbox>
            </el-col>
            <el-col :span="14" class="View">
                <!--班级,教材,点名显示主视图-->
                <div class="contentTop" style="height: 50px"></div>
                <router-view></router-view>
            </el-col>
        </el-row>

        <!--资源推送后点名界面-->
        <sendResourceDM v-if="sendResourceOverDM"></sendResourceDM>
        <!--底部教材选择窗口 -- 浏览器窗口固定定位 -->
        <curriculumMenu></curriculumMenu>

        <!--右侧漂浮菜单 -- 浏览器窗口固定定位 -->
        <funMenu></funMenu>

        <!--上课后的按钮-->
        <teachMenu v-show="BeginTeaching"></teachMenu>
    </div>
</template>
<script type="text/ecmascript-6">
    import userbox from './UserBox.vue'
    import curriculumMenu from './CurriculumMenu.vue'
    import funMenu from './funMenu.vue'
    import teachMenu from './teachMenu.vue'
    import sendResourceDM from './sendResourceDM.vue'

    //数据管理模块  mapGetters == data  mapActions == methods
    import {mapGetters, mapActions} from 'vuex'
    //    import stroe from '../store/'
    //导出Vue实例对象
    export default {
        name: 'app',
        //计算属性：vuex 里的 state数据
        computed: mapGetters([
            'configJIAOCAI',
            'BeginTeaching',
            'sendResourceOverDM'
        ]),
        //方法
        methods: mapActions([
            'getuserinfo',
            'UpDataSK',
            'getTeachingmaterial',
            'getMyClass',
            'enterClass'
        ]),
        //生命周期模板编译之前
        mounted(){
        },
        watch: {
            $route(to, from){
                if (to.path == '/DM') {

                } else {

                }
            }
        },
        created(){
//            var _this = this
//            _this.login();
//            setTimeout(function () {
//                _this.getuserinfo()
//                _this.getTeachingmaterial()
//                _this.getMyClass()
//            }, 200);
//            setInterval(function () {
//                _this.UpDataSK()
//            }, 500000);
        },
//        beforeCreate	组件实例刚刚被创建,属性都没有
//        created	实例已经创建完成，属性已经绑定
//        beforeMount	模板编译之前
//        mounted	模板编译之后，代替之前ready  *
//        beforeUpdate	组件更新之前
//        updated	组件更新完毕	*
//        beforeDestroy	组件销毁前
//        destroyed	组件销毁后
        data () {
            return {}
        },
        components: {
            'userbox': userbox,
            'curriculumMenu': curriculumMenu,
            'funMenu': funMenu,
            'teachMenu': teachMenu,
            'sendResourceDM': sendResourceDM
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>

    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .ViewCont {
        height: 100%;
        .View {
            height: 86%;
        }
    }

    .sk_bg {
        height: 0%;
        /*background: url('../assets/images/sk_bg.png') no-repeat;*/
        /*background-size: cover;*/
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }
</style>